<template>
	<view class="box">
		<scroll-view style="width: 100%;height: 100vh;" @scrolltolower="scrolltolower" scroll-y="true">
		<view class="main" v-for="(item,index) in extractPoints" :key="index">
			<view class="good">{{item.title}}</view>
			<view class="content">{{item.content}}</view>
			<view class="time">{{item.createTime}}</view>
		</view>
		<view class="grace-loading" v-if="isLoadAll">{{ bottomText }}</view>
		</scroll-view>	
	</view>
</template>

<script>
	import {msg} from "@/apis/msg.js"
	export default {
		data() {
			return {
				extractPoints: [],
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页显示的数量
				total: 0, // 总页数
				isLoadAll: true,
			}
		},
		computed: {
			bottomText() {
				if (this.extractPoints.length < this.total && this.extractPoints.length !== 0) {
					return "加载中..."
				} else {
					return "---没有更多数据---";
				}
			}
		},
		onShow() {
			msg({
				size:this.pageSize,
				current:this.currentPage
			})
			.then(res=>{
				if(res.code===200){
					this.extractPoints = res.data.records;
				}
			})
		},
		methods: {
			scrolltolower() {
				this.deviceAbnormalData();
			},
			deviceAbnormalData() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.extractPoints.length == this.total && this.extractPoints.length != 0) {
					return;
				};
				this.currentPage = this.currentPage + 1;
				return msg({
				   size:this.pageSize,
				   current:this.currentPage
			   })
					.then(res => {
						const {
							total,
							records
						} = res.data;
						if (this.extractPoints) {
							this.extractPoints = [...this.extractPoints, ...records];
						} else {
							this.extractPoints = [...records];
						}
						this.total = total;
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		padding: 20rpx;
		box-sizing: border-box;
		.main{
			// height: 300rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 25rpx;
			overflow: hidden;
			.content{
				width: 100%;
				margin: 15rpx 0;
				word-wrap: break-word; /* 允许在长单词内部换行 */
				word-break: break-all; /* 允许在任意位置换行 */
			}
		}
		.grace-loading {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-weight: bold;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
	}

</style>
